<template>
  <div class="inner">
    <h1>用 户 注 册</h1>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="0"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="" prop="nickName">
        <el-input v-model="ruleForm.nickName" placeholder="请输入用户昵称" />
      </el-form-item>
      <el-form-item label="" prop="phoneNumber">
        <el-input v-model="ruleForm.phoneNumber" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="" prop="messageCode">
        <el-input
          v-model="ruleForm.messageCode"
          placeholder="请输入短信验证码"
        />
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input
          v-model="ruleForm.password"
          placeholder="设置6至20位登录密码"
          type="password"
          show-password
        />
      </el-form-item>
      <el-form-item label="" prop="checkPassword">
        <el-input
          v-model="ruleForm.checkPassword"
          placeholder="请再次输入登录密码"
          type="password"
          show-password
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          style="width: 70%; margin-left: 15%"
          size="default"
          @click="submitForm(ruleFormRef)"
          :disabled="!radio"
        >
        注册
        </el-button>
        <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
      </el-form-item>
    </el-form>
    <div class="checkBox">
      <el-radio-group v-model="radio">
        <el-radio
          :label="true"
          @click.prevent="radioChange()"
          class="mr-5"
          style="height: 50px"
          size="large"
          ><span>勾选同意</span><span>《用户服务协议》</span></el-radio
        >
      </el-radio-group>
      <p>
        <span @click="expertPage">专家注册</span><span> | </span
        ><span @click="institutionPage">机构注册</span>
      </p>
    </div>
    <otherwise></otherwise>
    <div class="redTriangle"><h2 @click="loginPage">登 录</h2></div>
    <div class="whiteTriangle"></div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits, shallowRef } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import otherwise from "@/views/components/otherwise.vue";
import checkValidator from "@/views/data/checkValidator";
import expertRegister from "@/views/register/components/expertRegister.vue";
import institutionRegister from "@/views/register/components/institutionRegister.vue";

const { checkMobilePhone } = checkValidator();

const emit = defineEmits(["changeShowLogin", "changeShowRegisterPage"]);

let radio = ref(false);

interface RuleForm {
  nickName: string;
  phoneNumber: string;
  messageCode: string;
  checkPassword: string;
  password: string;
}

const formSize = ref("large");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  nickName: "",
  phoneNumber: "",
  messageCode: "",
  checkPassword: "",
  password: "",
});

/**
 * 再次确认密码
 */
const checkPassword = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error("请再次输入登录密码"));
  } else {
    if (ruleForm.password == ruleForm.checkPassword) {
      callback();
    } else {
      return callback(new Error("两者密码不一致"));
    }
  }
};

const rules = reactive<FormRules<RuleForm>>({
  nickName: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
  phoneNumber: [
    { required: true, validator: checkMobilePhone, trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  messageCode: [
    { required: true, message: "请输入短信验证码", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入登录密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码位数范围需在6-20内", trigger: "blur" },
  ],
  checkPassword: [
    { required: true, validator: checkPassword, trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const radioChange = () => {
  radio.value = !radio.value;
};
/**
 * 从注册页跳转到登录页
 */
const loginPage = () => {
  emit("changeShowLogin");
};
/**
 * 跳转到专家注册
 */
const expertPage = () => {
  emit("changeShowRegisterPage", "expert", shallowRef(expertRegister));
};
/**
 * 跳转到机构注册
 */
 const institutionPage = () => {
  emit("changeShowRegisterPage", "institution", shallowRef(institutionRegister));
};
</script>

<style lang="scss" scoped>
.inner {
  padding: 10% 25%;
  position: relative;
}
.redTriangle {
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    rgb(236, 0, 0) 50%,
    rgb(236, 0, 0) 100%
  );
}
.whiteTriangle {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    white 50%,
    white 100%
  );
}
h1 {
  font-size: 0.16rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.1rem;
}
h2 {
  font-size: 0.16rem;
  font-weight: bold;
  text-align: right;
  padding-right: 0.13rem;
  line-height: 0.5rem;
  transform: rotate(45deg);
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 100;
}
.checkBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  p {
    font-size: 0.07rem;
    cursor: pointer;
    color: #409eff;
    line-height: 0.269rem;
    span {
      color: rgb(236, 0, 0);
    }
  }
}
::v-deep(.el-form-item__content) {
  margin-bottom: 0.15rem;
}

::v-deep(.el-radio__inner) {
  border-radius: 2px !important;
}

::v-deep(.el-radio__input.is-checked .el-radio__inner::after) {
  content: "";
  width: 8px;
  height: 3px;
  border: 1px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 3px;
  left: 2px;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
</style>
